<template>
  <!--流程时间设置-->
  <div class="edu-page-warp">
    <ConditionCard label-width="100px" label-position="right" @search="searchList" @reset="reset" :expandable="false" :expand="false">
      <el-row>
        <el-col :span="8">
          <el-form-item :label="$t('graduationDesign.graduationYear')">
            <el-date-picker class="dateclass" v-model="queryForm.condition.grade" value-format="yyyy" type="year" :placeholder="$t('graduationDesign.defaultCurrentYear')">
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
    </ConditionCard>
    <el-card shadow="never">
      <div class="edu-page-title">{{$t('graduationDesign.processTime')}}</div>
      <el-form ref="processTableForm" :model="processTableForm" :rules="processTableRules">
        <edu-table :data="processTableForm.processTableData" @page-change="handlePageChange" :total="queryForm.total_" :pageNum="queryForm.pageNum_" :selection="false">
          <edu-table-column :label="$t('graduationDesign.process')" prop="reviewStatusName" min-width="80"></edu-table-column>
          <edu-table-column :label="$t('graduationDesign.startTime')" prop="startTime" min-width="120">
            <template slot-scope="scope">
              <el-form-item :prop="'processTableData.' + scope.$index + '.startTime'" :rules="processTableRules.startTime" class="table-form-itemclass">
                <el-date-picker class="table-date" v-model="scope.row.startTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" :placeholder="$t('graduationDesign.pleaseChoose')">
                </el-date-picker>
              </el-form-item>
            </template>
          </edu-table-column>
          <edu-table-column :label="$t('graduationDesign.endTime')" prop="endTime" min-width="120">
            <template slot-scope="scope">
              <el-form-item :prop="'processTableData.' + scope.$index + '.endTime'" :rules="processTableRules.endTime" class="table-form-itemclass">
                <el-date-picker class="table-date" v-model="scope.row.endTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" :placeholder="$t('graduationDesign.pleaseChoose')">
                </el-date-picker>
              </el-form-item>
            </template>
          </edu-table-column>
          <edu-table-column :label="$t('graduationDesign.status')" prop="status" min-width="80">
            <template slot-scope="scope">
              <span v-if="scope.row.status">{{$t('graduationDesign.activated')}}</span>
              <span v-else>{{$t('graduationDesign.terminated')}}</span>
            </template>
          </edu-table-column>
          <edu-table-column :label="$t('message.operating')" min-width="100">
            <template slot-scope="scope">
              <el-button type="text" @click="onSave(scope.row, scope.$index)">{{$t('graduationDesign.save')}}</el-button>
              <el-button type="text" v-if="scope.row.status" @click="onEnable(scope.row, scope.$index, 'deactivate')">{{$t('graduationDesign.deactivate')}}</el-button>
              <el-button type="text" v-else @click="onEnable(scope.row, scope.$index, 'enable')">{{$t('graduationDesign.enable')}}</el-button>
            </template>
          </edu-table-column>
        </edu-table>
      </el-form>
    </el-card>
  </div>
</template>
<script>
import API from "common/src/api/underGraduationDesign/timeSetting";
import UTILS from 'common/src/utils/utils';

export default {
  name: 'processSetting',
  data() {
    return {
      api: API,
      queryForm: {
        pageNum_: 1,
        total_: 0,
        pageSize_: 20,
        condition: {
          grade: ''
        }
      },
      processTableForm: {
        processTableData: []
      },
      processTableRules: {
        startTime: [
          { required: true, message: this.$t('graduationDesign.pleaseChoose'), trigger: 'change' }
        ],
        endTime: [
          { required: true, message: this.$t('graduationDesign.pleaseChoose'), trigger: 'change' }
        ]
      }
    };
  },
  mounted() {
    this.queryForm.condition.grade = new Date().getFullYear() + '';
    this.searchList();
  },
  methods: {
    searchList() {
      this.processTableForm.processTableData = [];
      this.api.getList(this.queryForm).then(({ data }) => {
        this.processTableForm.processTableData = data.list;
        this.queryForm.total_ = data.total;
        this.queryForm.pageNum_ = data.pageNum;
        this.$nextTick(() => {
          this.$refs["processTableForm"].clearValidate();
        });
      }).catch(() => { });
    },
    reset() {
      this.queryForm = {
        pageNum_: 1,
        total_: 0,
        pageSize_: 20,
        condition: {
          grade: ''
        }
      };
      this.queryForm.condition.grade = new Date().getFullYear() + '';
      this.searchList();
    },
    handlePageChange(val) {
      this.queryForm.pageSize_ = val.pageSize;
      this.queryForm.pageNum_ = val.pageNum;
      this.searchList();
    },
    // 保存
    onSave(row, index) {
      const startField = 'processTableData.' + index + '.startTime';
      const endField = 'processTableData.' + index + '.endTime';
      this.$refs["processTableForm"].validateField(startField, errMsg => {
        if (!errMsg) {
          this.$refs["processTableForm"].validateField(endField, errMsgEnd => {
            if (!errMsgEnd) {
              if (new Date(row.startTime).getTime() >= new Date(row.endTime).getTime()) {
                this.$eduAlert(this.$t('graduationDesign.startTimeNotGreaterEndTime'), this.$t('graduationDesign.prompt'));
                return false;
              }
              const params = { ...row };
              this.api.processSave(params).then(res => {
                this.$message.success(this.$t('graduationDesign.saveSuccess'));
                this.searchList();
              }).catch(() => { });
            } else {
              return false;
            }
          });
        } else {
          return false;
        }
      });
    },
    // 启用(停用)
    onEnable(row, index, type) {
      const startField = 'processTableData.' + index + '.startTime';
      const endField = 'processTableData.' + index + '.endTime';
      this.$refs["processTableForm"].validateField(startField, errMsg => {
        if (!errMsg) {
          this.$refs["processTableForm"].validateField(endField, errMsgEnd => {
            if (!errMsgEnd) {
              if (new Date(row.startTime).getTime() >= new Date(row.endTime).getTime()) {
                this.$eduAlert(this.$t('graduationDesign.startTimeNotGreaterEndTime'), this.$t('graduationDesign.prompt'));
                return false;
              }
              const action = type === "enable" ? this.$t('graduationDesign.enable') : this.$t('graduationDesign.deactivate');
              this.$eduConfirm(UTILS.i18nReplace(this.$t('graduationDesign.confirmProcessTips'), { action: action }), action).then(() => {
                const params = { ...row };
                params.status = type === "enable" ? true : false;
                this.api.processSave(params).then(res => {
                  this.$message.success(action + this.$t('graduationDesign.success'));
                  this.searchList();
                }).catch(() => { });
              }).catch(e => { });
            } else {
              return false;
            }
          });
        } else {
          return false;
        }
      });
    }
  }
}
</script>
<style lang="scss" scoped>
.table-date {
    width: 200px;
}
.table-form-itemclass {
    margin-bottom: 0px;
}
</style>
